@charset "utf-8";


/* 动态背景样式 */ body {
background:url("../img/bg (2).jpg");
linear-gradient(to right,#ff6e7f，#bfe9ff);
 background-repeat: no-repeat;
 background:url("../img/bg (2).jpg") no-repeat;
 background-size:100% 934px ;
ani mation:backgroundAnimation 5s infinite ;

display: flex;
justify-content: center; align-items: center; height: 100vh; margin: 0;
}



.dog{
				width:200px;
				height:150px;
				/* 验证你的选择器是否选中 */
				position: relative;
				left:-186px;
				top:320px;
				border:px solid red;
				background: url(../img/可爱.gif);
				background-size: 100% 100%;
				animation: dog  10s ease-in infinite;
					}
					
					@keyframes dog{
						0%{
							left:150px;
							top:320px;
							
							background-size: 100% 100%;
						}
						30%{left:454px;
						top:320px;
							background-size: 100% 100%;
						}
						
						100%{left:700px;
						top:320px;
							background-size: 100% 100%;
						}
						
					}

.heart{
			width:20px;
			height:20px;
			background-color: red;
			transform:rotate(135deg);			
			opacity:.9 ;
			left: 100px;
			top: -272px;
			position: relative;			
			filter:drop-shadow(0 0 20px red);			
			animation: heart .7s linear infinite;
		}
		
		.heart:before	{
			content:"";			
			display:block;			
			width:20px;
			height:20px;
			background-color:red;
			border-radius: 50%;			
			position:relative;
			left:-10px;			
		}	
		.heart:after{
			content:"";
			display:block;
			width:20px;
			height:20px;
			background-color:red;
			border-radius: 50%;			
			position:relative;
			top:-10px;		
				}
					
					@keyframes heart{
						 0%{ 
							
							transform: rotate(135deg) scale(1) ;
						}
						30%{
							
							transform: rotate(135deg) scale(.8) ;
							
						}
						100%{
							
							transform: rotate(135deg) scale(1.2) ;
						}
					}
.hudie	{	
			width:200px;
			height:170px;
			background: url("../img/蝴蝶.gif");
			border-radius: 50%;			
			position:relative;
			left:-845px;	
			top:-276px;
			animation: hudie 15s linear infinite;
		}	
		@keyframes hudie{
			30%{
				left:-845px;
				top:-276px;
				background-size: 100% 100%;
			}
			50%{
				left:-74px;
				top:-149px;
				background-size: 100% 100%;
			}
			100%{
				left:380px;
				top:-250px;
				background-size: 100% 100%;
			}
		}
		
		

					
					
	
						
.cotton{
		width:150px;
		height:150px;
		/* 验证你的选择器是否选中 */
		border:0px solid red;
		background: url(../img/小新.gif);
		
		background-size: 100% 100%;
		position: relative;
		left:-420px;
		top:319px;
		animation: cotton  15s linear infinite;
		}
/*动画定义 */
@keyframes backgroundAnimation
{
	
to{
	background-position:-1800px ;
}
}

 @keyframes cotton{
	
	0%{
		left:-420px;
		top:319px;
	}
	10%{
		left:-350px ;
		top:319px;
		background-size: 100% 100%;
		
		
	}
	20%{
		left:-300px ;
		top:319px ;
		background-size: 100% 100%;
	}
	30%{left:-200px ;
		top:319px ;
		background-size: 100% 100%;
		
	
	}
	40%{
		left: -100px;
		top:319px ;
		background-size: 100% 100%;
	}
	50%{	left:-50px ;
		top:319px ;
		background-size: 100% 100%;
	}
	60%{
	left:0px ;
	top: 319px;
	
	background-size: 100% 100%;
	}
	70%{left:50px ;
		top:319px;
		
		background-size: 100% 100%;

	}
	80%{left:100px ;
		top:319px ;
		
		background-size: 100% 100%;
		
	}
	90%{
		left:200px ;
		top:319px;
		background-size: 100% 100%;
		
	}
	100%{
		left:400px;
		top:319px;
		background-size: 100% 100%;
	}
	
	
	}
	